<template>
  <div>
    <el-tree
      :data="allData"
      v-if="data.length"
      default-expand-all
      :render-content="render"
      :expand-on-click-node="false"
    ></el-tree>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    fileDrop: Array,
    diectoryDrops: Array,
    delete: Function,
  },
  data() {
    return {
      allData: [],
      currentId: "",
      currentContent: "",
    };
  },
  watch: {
    data() {
      //   数据更改后需要重新重新获取值
      this.transformData();
    },
  },
  methods: {
    isParent(data) {
      return data.type === "parent";
    },
    handleCommand(data, value) {
      if (value === "rn") {
        this.handleRename(data);
      } else if (value === "rm") {
        this.handleRemove(data);
      }
    },
    remove(id) {
      let list = _.cloneDeep(this.data);
      list = list.filter((l) => l.id !== id);
      // .sync方法可以同步数据
      this.$emit("update:data", list);
      this.$message({
        type: "success",
        message: "删除成功",
      });
    },
    handleRename(data) {
      this.currentId = data.id;
      this.currentContent = data.name;
    },
    handleRemove(data) {
      this.$confirm(`此操作将永久删除该文件${data.name}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delete
            ? this.delete(data.id).then(() => {
                debugger;
                this.remove(data.id);
              })
            : this.remove(data.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    cancel() {
      this.currentId = "";
    },
    ok(data) {
      let list = _.cloneDeep(this.data);
      let item = list.find((l) => l.id === data.id);
      item.name = this.currentContent;
      // .sync方法可以同步数据
      this.currentId = "";
      this.$emit("update:data", list);
      this.$message({
        type: "success",
        message: "删除成功",
      });
    },
    handleInput(v) {
      this.currentContent = v;
    },
    render(h, { node, data, store }) {
      let list = this.isParent(data) ? this.diectoryDrops : this.fileDrop;
      return (
        <div style={{ width: "100%" }}>
          {this.isParent(data) ? (
            node.expanded ? (
              <i class="el-icon-folder-opened"></i>
            ) : (
              <i class="el-icon-folder"></i>
            )
          ) : (
            <i class="el-icon-document"></i>
          )}
          {data.id === this.currentId ? (
            <el-input
              value={this.currentContent}
              on-input={this.handleInput}
            ></el-input>
          ) : (
            data.name
          )}
          {/** .bind 会把原来的参数向后移动**/}

          {data.id !== this.currentId ? (
            <el-dropdown
              placement="bottom-start"
              targger="click"
              on-command={this.handleCommand.bind(this, data)}
            >
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                {list.map((item) => (
                  <el-dropdown-item command={item.text}>
                    {item.value}
                  </el-dropdown-item>
                ))}
              </el-dropdown-menu>
            </el-dropdown>
          ) : (
            <span style={{ float: "right" }}>
              <el-button type="text" on-click={this.ok.bind(this, data)}>
                确认
              </el-button>
              <el-button type="text" on-click={this.cancel}>
                取消
              </el-button>
            </span>
          )}
        </div>
      );
    },
    transformData() {
      //   进行数据克隆，克隆后再操作
      let AllData = _.cloneDeep(this.data);
      // 为了防止子组建更改父组建的值
      let treeMapList = AllData.reduce((memo, current) => {
        memo[current["id"]] = current;
        return memo;
      }, {});
      let result = AllData.reduce((arr, current) => {
        let pid = current.pid;
        let parent = treeMapList[pid];
        if (parent) {
          parent.children
            ? parent.children.push(current)
            : (parent.children = [current]);
        } else if (pid === 0) {
          arr.push(current);
        }
        return arr;
      }, []);
      this.allData = result;
    },
  },
  mounted() {
    this.transformData();
  },
};
</script>

<style>
.el-tree {
  margin-top: 25px;
  width: 50%;
}
.el-dropdown {
  float: right;
}
.el-tree .el-tree-node_content {
  height: 32px;
}
.el-tree .el-input {
  width: 50%;
}
</style>